$(function (){
    let myToast = bootstrap.Toast.getOrCreateInstance($(".toast"));
    let toastBody = document.querySelector(".toast-body");
    let userInfo = sessionStorage.getItem("shopping.userInfo");
    if(userInfo==null){
        toastBody.innerHTML = `用户未登录！请先去<a href="login.html">登录</a>`;
        myToast.show();
    }else{
        let user = JSON.parse(userInfo);
        fetch(`loadOrder.order?uid=${user.id}`).then(response=>response.json()).then(data=>{
            let orderContent = document.querySelector(".order-content-list");
            console.log(data);
            if(data.flag==true){
                let datas = data.data;
                let myOrderList = '';
                //订单条目渲染
                for(let i=datas.length-1;i>=0;i--){
                    let myItems = '';
                    //判断已支付和待发货状态
                    let state = '';
                    if(datas[i].ostate=='1'){
                        state = '待支付';
                    }else if(datas[i].ostate=='2'){
                        state = '待发货';
                    }
                    datas[i].items.forEach((item,i)=>{
                        myItems += `
                            <div class="d-flex order-content-item-item">
                                <div class="order-content-img col-4 align-self-center">
                                <a href="http://localhost:8080/product.html?pid=${item.product.id}">
                                    <img src="${item.product.pimage}" alt="">
                                </a>
                                </div>
                                <div class="col-6 align-self-center">
                                    <div class="order-content-tit">${item.product.name}</div>
                                    <div class="order-content-size">${item.size}</div>
                                </div>
                                <div class="col-2 order-content-count align-self-center">
                                    ${item.qty}
                                    </div>
                            </div>
                        `
                    })

                    myOrderList += `
                    <div class="order-content-list-wrapper">
                    <div class="order-content-list-header d-flex mt-3">
                        <div class="col-2 mx-2">${datas[i].dotime}</div>
                        <div>订单号：<span>${datas[i].id}</span></div>
                    </div>
                    <div class="order-content-item-all d-flex text-center h-100">
                        <div class="col-6 order-content-item">

                        ${myItems}

                        </div>
                        <div class="col-2 align-self-center">
                            <div class="userInfo-name">
                                ${datas[i].address.receiver}
                            </div>
                            <div class="userInfo-address">
                                ${datas[i].address.address}
                            </div>
                            <div class="userInfo-phone">
                                ${datas[i].address.tel}
                            </div>
                        </div>
                        <div class="col-1 align-self-center text-center">
                            <div class="order-content-sumPrice">
                                <div>应付</div>
                                <div>￥${datas[i].account}</div>
                            </div>
                            <div class="order-content-sumPrice">
                                <div>实付</div>
                                <div>￥${datas[i].account}</div>
                            </div>
                        </div>
                        <div class="col-2 align-self-center">
                            ${state}
                        </div>
                        <div class="col-1 align-self-center">
                            <div class="p-action col-1 align-self-center">
                                <button class="noselect"><span class="text">删除</span><span class="icon"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                            <path
                                                d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z">
                                            </path>
                                        </svg></span></button>
                            </div>
                        </div>
                    </div>
                </div>
                    `

                    orderContent.innerHTML = myOrderList;
                    $(".order-content-list").css("display","block");
                    $(".car-nothing-container").css("display","none");

                    $(".noselect").click(function (){
                        let orderId = $(this).parents(".order-content-item-all").siblings(".order-content-list-header").find("span").text();
                        $(this).parents(".order-content-list-wrapper").fadeOut();
                        $(this).parents(".order-content-list-wrapper").remove();
                        fetch(`remove.order?id=${orderId}`).then(response=>response.json()).then(data=>{
                            toastBody.innerHTML = data.message;
                            myToast.show();
                        })
                    })
                }
            }
        })
    }

    //轻量弹框 当点击关闭按钮时关闭
    $(".close").on("click",function(){
        myToast.hide();
    })
    stateManagement();
    function stateManagement() {
        //状态管理
        //判断用户是否登录
        let User = ``;
        if(userInfo){
            let user = JSON.parse(userInfo);
            User = `你好，
                <a href="#">${user.username}</a>
                &nbsp
                <a href="javascript:;" id="quit">
                    <i class="iconfont icon-tuichu"></i>
                    退出
                </a>
            `
        }else{
            User = `你好，请先
                <a href="login.html">登录</a>
                &nbsp
                <a href="regist.html">
                    注册
                </a>
            `
        }
        $("#sessionChange").html(`${User}`);
    }
    $("#quit").on("click",function(){
        sessionStorage.removeItem('shopping.userInfo');
        stateManagement();
        location.reload();
    })
    if($(".order-content-list").children().length<=0){
        $(".order-content-list").css("display","none");
        $(".car-nothing-container").css("display","block");
    }else{
        $(".order-content-list").css("display","block");
        $(".car-nothing-container").css("display","none");
    }
})